<template>
  <div class="add-form">
    <!-- 新增用户对话框 -->
    <el-dialog :title="titleText" :visible="dialogVisible" @close="onClose">
      <el-form ref="addFormRef" :model="addForm" :rules="addFormRules" label-width="150px"
               style="width: 80%; margin-left:10px;">
        <el-form-item label="企业名称" prop="shortName">
          <el-input v-model="addForm.shortName"></el-input>
        </el-form-item>
        <el-form-item label="所属公司" prop="company">
          <el-input v-model="addForm.company"></el-input>
          <p>https://www.tianyancha.com （在此可查询所属公司全称及简称）</p>
        </el-form-item>
        <el-form-item label="城市" prop="province">
          <el-select v-model="addForm.province" filterable placeholder="请选择"
                     style="width:48%;margin-right:2%;" @change="getCityInfo">
            <el-option v-for="(item,index) in citySelect.provinceOptions" :key="index" :label="item"
                       :value="item"></el-option>
          </el-select>
          <el-select v-model="addForm.city" placeholder="请选择" style="width:50%;">
            <el-option v-for="(item,index) in citySelect.cityOptions" :key="index" :label="item"
                       :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向(企业标签)" prop="tags">
          <el-input v-model="addForm.tags"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input v-model="addForm.remarks" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onClose">取 消</el-button>
        <el-button type="primary" @click="onSave">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { add, detail, update } from '../../api/hmmm/companys'
import { citys, provinces } from '../../api/hmmm/citys'

export default {
  name: 'CompanysAdd',
  props: {
    dialogVisible: {
      type: Boolean,
      required: true
    },
    id: {
      type: [Number, String],
      required: true
    }
  },

  data () {
    return {
      dialogFormVisible: false,
      citySelect: {
        provinceOptions: [],
        cityOptions: []
      },
      addForm: {
        shortName: '',
        company: '',
        province: '',
        city: '',
        tags: '',
        remarks: '',
        isFamous: true
      },
      // 表单验证
      addFormRules: {
        shortName: [
          {
            required: true,
            message: '请输入企业名称',
            trigger: 'blur'
          }
        ],
        company: [
          {
            required: true,
            message: '请输入所属公司名称',
            trigger: 'blur'
          }
        ],
        province: [{
          required: true,
          message: '请选择城市',
          trigger: 'blur'
        }],
        city: [{
          required: true,
          message: '请选择活动区域',
          trigger: 'blur'
        }],
        tags: [{
          required: true,
          message: '请输入企业方向',
          trigger: 'blur'
        }],
        remarks: [{
          required: true,
          message: '请填写备注',
          trigger: 'blur'
        }]
      }
    }
  },
  created () {
    this.getProvinceList()
  },
  computed: {
    titleText () {
      return this.addForm.id ? '编辑用户' : '创建用户'
    }
  },
  methods: {
    // 城市下拉选择框
    getProvinceList () {
      this.citySelect.provinceOptions = provinces()
    },
    /// 根据选择的城市 调用citys() 获取区
    getCityInfo (val) {
      this.citySelect.cityOptions = citys(val)
      this.addForm.city = this.citySelect.cityOptions[0]
    },
    onClose () {
      this.$emit('update:dialogVisible', false)
      this.$refs.addFormRef.resetFields()
      this.addForm = {
        shortName: '',
        company: '',
        province: '',
        city: '',
        tags: '',
        remarks: '',
        isFamous: true
      }
    },
    // 表单提交
    async onSave () {
      try {
        await this.$refs.addFormRef.validate()
        if (!this.addForm.id) { // 创建
          // 发起添加用户请求
          await add(this.addForm)
          this.$message.success('添加成功')
        } else { // 编辑
          this.addForm.isFamous = !!this.addForm.isFamous // 后台需要布尔型，拿到的是数字
          await update(this.addForm)
          await this.$message.success('修改成功')
        }
        this.onClose()
        this.$emit('successAdd')
      } catch (e) {
        console.log(e)
      }
    },
    // 通过id获取到编辑的数据
    async loadEditRowById () {
      const { data } = await detail({
        id: this.id
      })
      this.addForm = data
    }
  }
}
</script>
<style>
.el-form--label-left .el-form-item__label {
  text-align: right;
}

.el-form-item--medium {
  margin-bottom: 22px;
}

.el-dialog__footer {
  text-align: center;
}
</style>
